<template>
  <el-dialog
    v-model="visible"
    :title="record.id ? '编辑病历' : '新建病历'"
    width="800px"
    top="5vh"
  >
    <el-form :model="form" label-width="100px" :rules="rules" ref="formRef">
      <el-form-item label="患者姓名" prop="patientName">
        <el-input v-model="form.patientName" placeholder="请输入患者姓名" />
      </el-form-item>

      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="form.gender">
          <el-radio label="男">男</el-radio>
          <el-radio label="女">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="年龄" prop="age">
        <el-input-number v-model="form.age" :min="0" :max="120" controls-position="right" />
      </el-form-item>

      <el-form-item label="床号" prop="bedNumber">
        <el-input v-model="form.bedNumber" placeholder="请输入床号" />
      </el-form-item>

      <el-form-item label="科室" prop="department">
        <el-select v-model="form.department" placeholder="请选择科室">
          <el-option label="内科" value="内科" />
          <el-option label="外科" value="外科" />
          <el-option label="儿科" value="儿科" />
          <el-option label="妇产科" value="妇产科" />
          <el-option label="骨科" value="骨科" />
        </el-select>
      </el-form-item>

      <el-form-item label="主治医生" prop="doctor">
        <el-input v-model="form.doctor" placeholder="请输入主治医生姓名" />
      </el-form-item>

      <el-form-item label="入院日期" prop="admissionDate">
        <el-date-picker
          v-model="form.admissionDate"
          type="date"
          placeholder="选择入院日期"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>

      <el-form-item label="诊断" prop="diagnosis">
        <el-input
          v-model="form.diagnosis"
          type="textarea"
          :rows="2"
          placeholder="请输入诊断信息"
        />
      </el-form-item>

      <el-divider>生命体征</el-divider>

      <div class="vitals-form">
        <el-form-item label="体温(°C)" prop="vitalSigns.temperature">
          <el-input-number
            v-model="form.vitalSigns.temperature"
            :min="35"
            :max="42"
            :step="0.1"
            controls-position="right"
          />
        </el-form-item>

        <el-form-item label="脉搏(次/分)" prop="vitalSigns.pulse">
          <el-input-number
            v-model="form.vitalSigns.pulse"
            :min="40"
            :max="200"
            controls-position="right"
          />
        </el-form-item>

        <el-form-item label="呼吸(次/分)" prop="vitalSigns.respiration">
          <el-input-number
            v-model="form.vitalSigns.respiration"
            :min="10"
            :max="40"
            controls-position="right"
          />
        </el-form-item>

        <el-form-item label="血压(mmHg)" prop="vitalSigns.bloodPressure">
          <el-input
            v-model="form.vitalSigns.bloodPressure"
            placeholder="如：120/80"
          />
        </el-form-item>

        <el-form-item label="血氧饱和度(%)" prop="vitalSigns.oxygen">
          <el-input-number
            v-model="form.vitalSigns.oxygen"
            :min="80"
            :max="100"
            controls-position="right"
          />
        </el-form-item>
      </div>

      <el-divider>护理信息</el-divider>

      <el-form-item label="护理记录" prop="nursingNotes">
        <el-input
          v-model="form.nursingNotes"
          type="textarea"
          :rows="3"
          placeholder="请输入护理记录"
        />
      </el-form-item>

      <el-form-item label="特别注意事项" prop="specialNotes">
        <el-input
          v-model="form.specialNotes"
          type="textarea"
          :rows="2"
          placeholder="请输入特别注意事项"
        />
      </el-form-item>

      <el-form-item label="状态" prop="recordStatus">
        <el-select v-model="form.recordStatus" placeholder="请选择状态">
          <el-option label="已完成" value="completed" />
          <el-option label="待完善" value="pending" />
          <el-option label="紧急" value="urgent" />
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  visible: {
    type: Boolean,
    required: true
  },
  record: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update:visible', 'save'])

const formRef = ref()
const form = ref({
  patientName: '',
  gender: '',
  age: null,
  bedNumber: '',
  department: '',
  doctor: '',
  admissionDate: '',
  diagnosis: '',
  recordStatus: 'pending',
  vitalSigns: {
    temperature: null,
    pulse: null,
    respiration: null,
    bloodPressure: '',
    oxygen: null
  },
  nursingNotes: '',
  specialNotes: ''
})

// 表单验证规则
const rules = {
  patientName: [{ required: true, message: '请输入患者姓名', trigger: 'blur' }],
  gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
  age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
  bedNumber: [{ required: true, message: '请输入床号', trigger: 'blur' }],
  department: [{ required: true, message: '请选择科室', trigger: 'change' }],
  doctor: [{ required: true, message: '请输入主治医生', trigger: 'blur' }],
  admissionDate: [{ required: true, message: '请选择入院日期', trigger: 'change' }],
  diagnosis: [{ required: true, message: '请输入诊断信息', trigger: 'blur' }]
}

const visible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

// 监听record变化，填充表单
watch(() => props.record, (newRecord) => {
  if (newRecord) {
    form.value = { ...newRecord }
  } else {
    resetForm()
  }
}, { immediate: true })

// 重置表单
const resetForm = () => {
  form.value = {
    patientName: '',
    gender: '',
    age: null,
    bedNumber: '',
    department: '',
    doctor: '',
    admissionDate: '',
    diagnosis: '',
    recordStatus: 'pending',
    vitalSigns: {
      temperature: null,
      pulse: null,
      respiration: null,
      bloodPressure: '',
      oxygen: null
    },
    nursingNotes: '',
    specialNotes: ''
  }
  if (formRef.value) {
    formRef.value.clearValidate()
  }
}

// 保存表单
const handleSave = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    emit('save', { ...form.value })
    visible.value = false
  } catch (error) {
    ElMessage.warning('请完善必填信息')
  }
}
</script>

<style lang="scss" scoped>
.vitals-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 20px;
}

// 响应式设计
@media (max-width: 768px) {
  .vitals-form {
    grid-template-columns: 1fr;
  }
}
</style>